<template>
  <div class="register-container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="register-form">
      <h1 class="register-title">注册</h1>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" type="email" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" show-password />
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: center; width: 100%;">
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 注册 </el-button>
          <el-button @click="resetForm(ruleFormRef)"> 重置 </el-button>
          <el-button link type="primary" @click="router.replace('/login')"> 已有账号，去登录 </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import type {ComponentSize, FormInstance, FormRules} from 'element-plus';
import type {UserRegisterDto} from '@/dtos/auth.dto';
import {registerApi} from '@/apis/auth';
import {useUserStore} from '@/stores/user';
import {useRouter} from 'vue-router';

const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const userStore = useUserStore();
const ruleForm = reactive<UserRegisterDto>({
  email: '492384481@qq.com',
  password: 'xiecan666',
});

const rules = reactive<FormRules<UserRegisterDto>>({
  email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid)
    {
      registerApi(ruleForm).then((res) => {
        router.replace('/login');
      });
    } else
    {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* 使登录框垂直居中 */
  background-color: #f5f5f5;
  /* 背景颜色 */

  .register-form {
    width: 400px;
    /* 设置表单宽度 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    background-color: #fff;
    /* 表单背景颜色 */

  }

  .register-title {
    text-align: center;
    /* 标题居中 */
    /* 标题与表单的间距 */
    margin: 0 0 20px;
  }
}
</style>